<template>
  <div class="register">
    <section>
      <div class="title">注册</div>
      <div class="register-form">
        <el-form ref="registerFormRef" style="max-width: 300px" :model="registerForm" status-icon :rules="rules" label-width="auto" class="demo-ruleForm">
          <el-form-item label="用户名" prop="regUserAccount">
            <el-input v-model="registerForm.userAccount"  />
          </el-form-item>
          <el-form-item label="密码" prop="regUserPassword">
            <el-input v-model="registerForm.userPassword" type="password" />
          </el-form-item>
          <el-form-item label="确定密码" prop="regUsercheckPassword">
            <el-input v-model="registerForm.checkPassword" type="password" />
          </el-form-item>
          <el-form-item class="button-wrapper">
            <el-button round type="primary" @click="submitForm(registerFormRef)">
              注册
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
    <p class="toLogin" @click="router.push('/login')">已有账户？点击这里登录</p>
  </div>
</template>

<script setup>
import { ref, reactive,toRaw } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import axios from '../../api/index'

const registerFormRef = ref()

const router = useRouter()

const validateRegUsername = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('用户名不可以为空哦！'))
  } else {
    callback()
  }
}

const validateRegPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('密码不可以为空哦！'))
  } else {
    callback()
  }
}
const validateRegcheckPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('确认密码不可以为空哦！'))
  } else {
    callback()
  }
}


const registerForm = reactive({
  userAccount: '',
  userPassword: '',
  checkPassword: ''
})

const rules = reactive({
  userAccount: [{ validator: validateRegUsername, trigger: 'blur' }],
  userPassword: [{ validator: validateRegPassword, trigger: 'blur' }],
  checkPassword: [{ validator: validateRegcheckPassword, trigger: 'blur' }]
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('register successful!')
      console.log(toRaw(registerForm));
      register(toRaw(registerForm))
      
      // 这里可以添加实际的登录逻辑，比如调用API
    } else {
      console.log('register failed!')
      ElMessage.error('Please check your inputs.')
    }
  })
}


const register = async (value) => {

    const res = await axios.post('/user/register', value)
    console.log(res);

    //跳转到登录页面
    if(res.code === 1){
        // showToast('恭喜宁，注册成功啦！');
        setTimeout(() => {
            router.push('/login')
        }, 1000);
    }
} 

</script>

<style lang="css" scoped>

section {
    width: 50%;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    
}

.toLogin{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: small;
    }

.title {
    font-size: 30px;
    font-weight: 1000;
}
.register-form{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.el-input {
  border-radius: 100px; /* 你可以根据需要调整圆角的大小 */
}

.button-wrapper {
  width: 100%; /* 设置为100%以适应父容器 */
  text-align: center; /* 水平居中文本和内联元素 */
}

.el-button {
  width: 100%; /* 使按钮宽度占满父容器 */
}

</style>